<template>
  <div class="cglq">
    <div class="head">
      <span>常规录取信息导入</span>
    </div>

    <div class="province">
      <span>省份名称：</span>
      <el-select v-model="sfmc" filterable placeholder="请选择">
        <el-option
          v-for="item in sfmcs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div class="type">
      <span>考生类别：</span>
      <el-select v-model="jhlbmc" filterable placeholder="请选择">
        <el-option
          v-for="item in jhlbmcs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://118.31.51.131:8081/api/zsxt/lqgl/ksxx/dr"
      :data="{ sfmc: sfmc, kslb: jhlbmc, kslb2: '0', token: token }"
      multiple
      accept=".dbf,.xls"
      :on-success="handleSuccess"
      :on-error="handleErr"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" style="width: 110px" size="small" type="primary"
        >选取文件</el-button
      >
      <el-button
        style="margin-left: 70px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      sfmc: "",
      jhlbmc: "",
      sfmcs: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "天津",
          label: "天津",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "重庆",
          label: "重庆",
        },
        {
          value: "河北",
          label: "河北",
        },
        {
          value: "山西",
          label: "山西",
        },
        {
          value: "辽宁",
          label: "辽宁",
        },
        {
          value: "吉林",
          label: "吉林",
        },
        {
          value: "黑龙江",
          label: "黑龙江",
        },
        {
          value: "江苏",
          label: "江苏",
        },
        {
          value: "浙江",
          label: "浙江",
        },
        {
          value: "安徽",
          label: "安徽",
        },
        {
          value: "福建",
          label: "福建",
        },
        {
          value: "江西",
          label: "江西",
        },
        {
          value: "山东",
          label: "山东",
        },
        {
          value: "河南",
          label: "河南",
        },
        {
          value: "湖北",
          label: "湖北",
        },
        {
          value: "湖南",
          label: "湖南",
        },
        {
          value: "广东",
          label: "广东",
        },
        {
          value: "海南",
          label: "海南",
        },
        {
          value: "四川",
          label: "四川",
        },
        {
          value: "贵州",
          label: "贵州",
        },
        {
          value: "云南",
          label: "云南",
        },
        {
          value: "陕西",
          label: "陕西",
        },
        {
          value: "甘肃",
          label: "甘肃",
        },
        {
          value: "青海",
          label: "青海",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "内蒙古",
          label: "内蒙古",
        },
        {
          value: "广西",
          label: "广西",
        },
        {
          value: "西藏",
          label: "西藏",
        },
        {
          value: "宁夏",
          label: "宁夏",
        },
        {
          value: "新疆",
          label: "新疆",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "澳门",
          label: "澳门",
        },
      ],
      jhlbmcs: [
        {
          value: "国家专项",
          label: "国家专项",
        },
        {
          value: "高校专项",
          label: "高校专项",
        },
        {
          value: "文史",
          label: "文史",
        },
        {
          value: "理工",
          label: "理工",
        },
        {
          value: "艺术",
          label: "艺术",
        },
      ],
      fileList: [],
      token: sessionStorage.getItem("token"),
    };
  },
  methods: {
    handleSuccess(res, file, fileLsit) {
      console.log(res);
      // if (res == "数据已添加，请勿重复添加数据") {
      //   alert("请勿重复添加");
      // } else {
      //   this.$refs.upload.clearFiles();
      //   alert("上传成功");
      // }
      this.$refs.upload.clearFiles();
    },
    handleErr(err) {
      console.log(err);
    },
    submitUpload() {
      if (this.sfmc != "" && this.jhlbmc != "") {
        this.$refs.upload.submit();
      }else {
        alert('请选择省份和类别')
      }
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 4] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {},
};
</script>

<style scoped>
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
/* .head button:nth-of-type(1) {
  margin-left: 900px;
}
.head button:nth-of-type(2) {
  margin-left: 150px;
}
.head button {
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
button:active {
  opacity: 0.8;
} */
.el-input {
  width: 200px;
}
.province {
  position: absolute;
  left: calc(50% - 150px);
  top: 200px;
}
.type {
  position: absolute;
  left: calc(50% - 150px);
  top: 280px;
}
.upload-demo {
  position: absolute;
  left: calc(50% - 150px);
  top: 360px;
  height: 50px;
  width: 300px;
}
.cglq ::v-deep .el-upload-list {
  height: 300px;
  overflow-y: auto;
}
</style>